<template>
  <view class="content">
    <uni-nav-bar style="z-index: 999999;" statusBar :title="type == '0' ? '期初盘点详情' : '库存盘点详情'" fixed :border="false"
      @clickLeft="onClickLeft" @clickRight="serachFn" height="88rpx" background-color="#f7f7f7">
      <block slot="left">
        <view class="city">
          <uni-icons type="left" color="#666" size="18" />
        </view>
      </block>
      <!-- <view class="input-view" style="text-align: center;">盘点详情</view> -->
      <block slot="right" v-if="type == '1'">
        <view class="city">
          筛选
        </view>
      </block>
    </uni-nav-bar>
    <view class="topTag">
      <input class="uni-input" @confirm="searchBtn" v-model="keyword" confirm-type="search" placeholder="搜索" />
      <view class="by">
        <uni-icons type="search" size="24" @click="searchBtn"></uni-icons>
      </view>
    </view>
    <scroll-view class="scroll-view_H" scroll-y @refresherrefresh="refresherrefreshFn" refresher-enabled="true"
      :show-scrollbar="false" @scrolltolower="lower" :refresher-triggered="triggered" enhanced
      :style="{ height: `calc(100vh - 164rpx - ${statusBarHeight}px)` }">

      <!-- 库存盘点 -->
      <view class="infoCard" v-for="item in scmGoodsList" :key="item.id" v-if="type == '1'">
        <view class="tokenNum">
          <view class="count u-ellipsis goodsname" style="width: 65% !important;">{{ item.name }}</view>
          <view class="count u-ellipsis" style="width: 35% !important;">规格：{{ item.standard }}</view>
        </view>
        <view class="tokenNum">
          <view class="count u-ellipsis " style="width: 65% !important;">{{ item.barCode }}</view>
          <view class="count u-ellipsis" style="width: 35% !important;">品牌：{{ item.brandName }}</view>
        </view>
        <view class="tokenNum">
          <view class="count u-ellipsis " style="width: 65% !important;">{{ item.categoryName }}</view>
          <view class="count" style="width: 35% !important;">盘点数量：{{ item.stocktakingNum }}</view>
        </view>
        <view class="tokenNum">
          <view class="count" style="width: 65% !important;">库存数量：{{ item.inventoryNum ? item.inventoryNum : '-' }}</view>
          <view class="count" style="width: 35% !important;" v-if="item.status == '0'">状态：正常</view>
          <view class="count" style="width: 35% !important;" v-if="item.status == '1'">状态：盘盈</view>
          <view class="count" style="width: 35% !important;" v-if="item.status == '2'">状态：盘亏</view>
          <view class="count" style="width: 35% !important;" v-if="item.status == '3'">状态：漏盘</view>
        </view>
      </view>
      <!-- 期初盘点 -->
      <view class="infoCard2" v-for="item in scmGoodsList" :key="item.id" v-if="type == '0'">
        <view class="tokenNum">
          <view class="count u-ellipsis goodsname" style="width: 65% !important;">{{ item.name }}</view>
          <view class="count u-ellipsis" style="width: 35% !important;">规格：{{ item.standard ? item.standard : '-' }}
          </view>
        </view>
        <view class="tokenNum">
          <view class="count u-ellipsis " style="width: 65% !important;">{{ item.barCode }}</view>
          <view class="count u-ellipsis" style="width: 35% !important;">品牌：{{ item.brandName ? item.brandName : '-' }}
          </view>
        </view>
        <view class="tokenNum">
          <view class="count u-ellipsis " style="width: 65% !important;">{{ item.categoryName ? item.categoryName : '-' }}
          </view>
          <view class="count" style="width: 35% !important;">盘点数量：{{ item.stocktakingNum }}</view>
        </view>
      </view>
      <uni-load-more :status="loading" v-if="scmGoodsList.length > 0"></uni-load-more>
      <view
        style="width: 100%;height: 100%;background-color: #f7f7f7;display: flex;justify-content: center;align-items: center;"
        v-if="scmGoodsList.length == 0">
        <image src="/static/index/nonedata.png" mode="aspectFill" style="width: 400rpx;height: 400rpx;"></image>
      </view>
    </scroll-view>
    <uni-popup ref="alertDialog" type="top"
      style="padding-top:  calc(88rpx + var(--status-bar-height));box-sizing: border-box;" border-radius=" 0 0 10px 10px"
      background-color="#f7f7f7" @change="dialogchange">
      <view class="popup-content">
        <view style="padding: 10rpx;width: 120rpx;">状态：</view>
        <view class="box">
          <uni-data-checkbox mode="tag" v-model="status" :localdata="range" @change="rangechange"></uni-data-checkbox>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { reqInitialInventoryDetail } from '@/apis/member.js'
export default {
  name: "InventoryInfo",
  data() {
    return {
      // type: '0',
      scmGoodsList: [], // 供应链标品
      keyword: '',
      page: {
        pageNum: 1,
        pageSize: 15
      },
      triggered: false, // 是否触发下拉刷新
      loading: 'loading', // 是否触发上拉加载
      nextPage: true,
      stockId: '',
      type: '',
      status: '',
      range: [
        { value: '', text: "全部" },
        { value: '0', text: "无盈亏" },
        { value: '1', text: "盘盈" },
        { value: '2', text: "盘亏" },
        { value: '3', text: "漏盘" },
      ],
    }
  },
  onLoad(params) {
    this.stockId = params?.id
    this.type = params?.type
    console.log('this.stockId', this.stockId, this.type);
    this.reqInitialInventoryDetail()
  },
  onShow() {
  },
  methods: {
    refresherrefreshFn() {
      this.page.pageNum = 1
      this.triggered = true
      this.scmGoodsList = []
      this.loading = "loading";
      this.reqInitialInventoryDetail()

    },
    // 供应链 
    async reqInitialInventoryDetail() {
      const res = await reqInitialInventoryDetail({ ...this.page, id: this.stockId, type: this.type, status: this.status, name: this.keyword })
      if (res.code === 200) {
        console.log('res', res.data);
        this.scmGoodsList = [...this.scmGoodsList, ...res.data.list]
        // this.nextPage = res.data.nextPage
        console.log('scmGoodsList:', this.scmGoodsList);
        this.triggered = false
        if (res.data.isLastPage) {
          this.loading = "noMore"
        }
      }
    },

    lower() {
      if (this.loading == "noMore") {
        return;
      }
      this.page.pageNum++;
      this.loading = "loading";
      if (this.type == '0') {
        this.reqInitialInventoryDetail()
      } else if (this.type == '1') {
        this.reqInitialInventoryDetail()
      }
    },
    dialogchange() {

    },
    rangechange(e) {
      console.log('e', e);
      this.status = e.detail.value
      this.page.pageNum = 1
      this.scmGoodsList = []
      this.loading = "loading";
      this.reqInitialInventoryDetail()
      this.$refs.alertDialog.close()
    },
    serachFn() {
      if (this.type == '0') return
      this.$refs.alertDialog.open()
    },
    searchBtn() {
      // if (!this.keyword) {
      this.page.pageNum = 1
      // }
      console.log('key', this.keyword);
      this.scmGoodsList = []
      this.loading = "loading";
      this.reqInitialInventoryDetail()
    }
  }
}
</script>
<style>
page {
  background: #f7f7f7;

}
</style>
<style lang="scss" scoped >
.content {
  height: 100vh;
  background-color: #f7f7f7;

}

view {
  box-sizing: border-box;
}

.topTag {
  height: 60rpx;
  width: 100%;
  display: flex;
  font-size: 24rpx;
  align-items: center;
  padding: 10rpx 30rpx;
  line-height: 40rpx;
  margin-bottom: 16rpx;

  .uni-input {
    flex: 1;
    height: 50rpx;
    padding: 0 20rpx;
    font-size: 24rpx;
    margin-left: 20rpx;
    background-color: #eaeaea;
    border-radius: 30rpx;
    border: 1px solid #ccc;
  }

}

.goodsname {
  font-weight: 600;
}

.popup-content {
  // height: 300rpx;
  display: flex;
  align-items: center;
  // width: 400rpx;
  padding: 30rpx;

  .box {
    display: flex;
  }
}

.infoCard {
  // width: 100%;
  background-color: #edf2fa;

  border-radius: 20rpx;
  margin: 20rpx;
  font-size: 26rpx;
  // margin-bottom: 10rpx;
  padding: 20rpx 10rpx;
  align-items: center;
  height: 280rpx;
  line-height: 60rpx;
  border: 1px solid #d3e3fd;

  .tokenNum {

    display: flex;
    width: 100%;
    justify-content: space-between;

    .count {
      width: 48%;
      padding-left: 20rpx;
    }
  }
}

.infoCard2 {
  // width: 100%;
  background-color: #edf2fa;
  border-radius: 20rpx;
  margin: 20rpx;
  font-size: 26rpx;
  // margin-bottom: 10rpx;
  padding: 20rpx 10rpx;
  align-items: center;
  height: 220rpx;
  line-height: 56rpx;
  border: 1px solid #d3e3fd;

  .tokenNum {
    display: flex;
    width: 100%;
    justify-content: space-between;

    .count {
      width: 48%;
      padding-left: 20rpx;
    }
  }
}
</style>
